<template>
<div>
  <div class="box">
    <span class="pin">品质优选</span>
    <span class="duo"><a href="">更多</a></span>
  </div>
  <div class="box_2">
    <span v-for="(cate,index) in cates" :key="index" class="box_3">
          <a>
            <img :src="cate.img" alt="">
            <p>{{cate.name}}</p>
          </a>
          <div class="dapai">大牌精选</div>
        </span>
  </div>
</div>
</template>

<script>
export default {
  created () {
    this.$http.get('static/json/recommend.json').then(ressponse => {
      console.log(ressponse.data)
      this.cates = ressponse.data
    })
  },
  data () {
    return {
      cates: []
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  width: 100%;
  height: 100%;
}
.pin {
  font-size: .2rem /* 15/75 */;
  color: rgb(241, 161, 95);
}
.duo {
  position: absolute;
  font-size: .133333rem /* 10/75 */;
  padding: .066667rem /* 5/75 */;
  right: 0;
}
.duo a{
  color: #000;
}
.dapai{
 display: inline-block;
 width: 1.6rem /* 120/75 */;
 height: .4rem /* 30/75 */;
 font-size: .2rem /* 15/75 */;
 line-height: .4rem /* 30/75 */;
 color: blue;
 border: .013333rem solid blue;
}
.box_3{
  display: inline-block;
   width: 18%;
   height: 1.333333rem /* 100/75 */;
   padding: .16rem /* 12/75 */;
   text-align: center;
}
.box_3 p{
  color: #000;
  font-size: .133333rem /* 10/75 */;
}
</style>
